<template>
	<view class="container bg-main pos-r">
		<view class="padding-xl dflex-c dflex-flow-c">
			<view class="portrait-box margin-bottom">
				<image class="headimg border-radius-c"
					:src="(member && member.member_headimg) || '/static/images/user/default.png'"></image>
			</view>

			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconshouji margin-right"></view>
				<view class="flex1 dflex">
					<input class="border-line padding-sm flex1" type="number" data-key="mobile" maxlength="11"
						:value="mobile" @input="inputChange" placeholder="请输入手机号" />
				</view>
			</view>

			<view class="w-full dflex">
				<view class="iconfont iconmima margin-right"></view>
				<!-- #ifdef MP -->
				<input class="border-line padding-sm flex1" type="text" password data-key="password" maxlength="20"
					:value="password" @input="inputChange" @confirm="tologin" placeholder="请输入密码" />
				<!-- #endif -->

				<!-- #ifndef MP -->
				<input class="border-line padding-sm flex1" type="password" password data-key="password" maxlength="20"
					:value="password" @input="inputChange" @confirm="tologin" placeholder="请输入密码" />
				<!-- #endif -->
			</view>
			<view class="dflex-b w-full margin-bottom-sm">
				<view class="padding-tb-sm ft-base" @click="toregister">立即注册</view>
			</view>
			<view class="w-full margin-top-xl">
				<view class="dflex-b border-radius-lg">
					<view class="tac padding-tb-sm flex1 bg-base fs" @click="tologin">登录</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	import {
		loginApi,
	} from "@/api/user.js";

	export default {

		data() {
			return {
				ismp: false,
				platform: '',
				platform_name: '',
				platform_icon: '',

				env: {},
				isshow: false,

				mobile: '',
				password: '',

				authorize: 0
			};
		},
		computed: {
			...mapState(['member'])
		},

		onShow() {
			console.log('login Show');
			// #ifdef MP-WEIXIN
			let lopts = uni.getLaunchOptionsSync();
			console.log(lopts);
			// #endif
			let _this = this;

			uni.getStorage({
				key: '__mobile',
				success(res) {
					_this.mobile = res.data;
				}
			});

			// 查看用户是否已授权获取用户数据
			if (uni.canIUse('getSetting')) {
				uni.getSetting({
					success(res) {
						console.log('getSetting ', res);
						_this.authorize = res.authSetting['scope.userInfo'];
						console.log('getSetting scope.userInfo authorize ', _this.authorize);
					}
				});
			}
		},
		onLoad() {
			let _this = this;

			this.$api.get_env(res => {
				this.env = res;
				console.log('this.env', this.env);
				this.ismp = this.env.is_mp;
				this.platform = this.env.platform;
				this.platform_icon = this.env.platform_icon;
				this.platform_name = this.env.platform_name;
			});
		},
		methods: {
			...mapMutations(['login', 'logout', 'token']),
			
			
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			toregister() {
				// 注册页
				uni.navigateTo({
					url: '/pages/login/register'
				});
			},

			async tologin() {
				let _this = this;
				if (_this.is_login) return;

				if (!this.mobile) {
					this.$api.msg('请输入手机号');
					return;
				}

				if (!this.password) {
					this.$api.msg('请输入密码');
					return;
				}
				if (this.$api.trim(this.password).length < 4) {
					this.$api.msg('密码长度不能小于4位');
					return;
				}

				const response = await loginApi({
					userName: this.mobile,
					userPassword: this.password
				}).catch(() => {});

				if (response?.code == 200) {
					// 调用 store login
					_this.login(response?.data ?? {});

					_this.$api.alert('登录成功', () => {
						if (_this.$api.pages().length > 1) {
							// 返回上一页
							uni.navigateBack({});
							return;
						}
						// 首页
						_this.$api.tohome();
					});
					return;
				} else {
					this.$api.msg(response.msg);
				}
			},

		}
	};
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.container {
		padding-top: 5vh;
		width: 100vw;
		min-height: 100vh;
		overflow: hidden;
	}

	.portrait-box {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}

	.l-mask {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(51, 51, 51, 0.3);
		z-index: 99;
	}

	.box-container {
		position: absolute;
		width: 500rpx;
		height: 300rpx;
		background: #fff;
		left: 50%;
		transform: translate(-50%, -50%);
		top: 50%;
		z-index: 999;
		border-radius: 10rpx;
		text-align: center;
		padding: 30rpx;

		.title {
			margin-top: 40rpx;
			font-size: 30rpx;
		}

		.btn-contaer {
			display: flex;
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;
		}

		button {
			background: #eee;
			color: #333;
			width: 50%;
			font-size: 28rpx;

			&:last-child {
				margin-left: 10px;
				background: #26a92e;
				color: #fff;
			}
		}
	}
</style>